<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="100px"  ref="formInline" slot="form" :rules="rules">
                <el-row :gutter="21"> 
                    <el-col :span="8">
                        <el-form-item label="内容">
                            <el-input v-model="formInline.content" placeholder="请输入内容" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="客户端">
                            <el-select v-model="formInline.client" style="width:100%" >
                                <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发布日期">
                            <el-date-picker v-model="formInline.updateTime" :editable="false" type="daterange" placeholder="选择日期" :picker-options="formInline.pickerOptions1" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="21">
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="formInline.status" style="width:100%" >
                                <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>                    
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                </div>
            </el-form>
 
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button  @click="addDynamics">添加</el-button>
                </div>
            </div>
            
            <el-table :data="dataApply" style="width: 100%" border @sort-change="handlesortChange" v-loading="loading" ref="multipleTable">
 
                <el-table-column label="内容" align="center"  prop="content" min-width="300">
                    <template scope="scope" >
                        <span v-if="!scope.row.content">--</span>
                        <a type="text" class="btn-success" v-if="scope.row.content" @click="check(scope.row.pId)">{{scope.row.content}}</a>
                    </template>
                </el-table-column>
                
                <el-table-column label="点赞数" align="center" sortable="column" prop="clickNum" min-width="100">
                    <template scope="scope">
                        <span>{{scope.row.clickNum | isNull}}</span>
                    </template>
                </el-table-column>
 
                <el-table-column label="评论数" align="center" sortable="column" prop="commentNum" min-width="100">
                    <template scope="scope">
                        <span>{{scope.row.commentNum | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="客户端" align="center" min-width="170">
                    <template scope="scope">
                        <span v-if="scope.row.client=='0'">家庭端</span>
                        <span v-if="scope.row.client=='1'">教学端</span>
                        <span v-if="scope.row.client=='2'">家庭和教学端</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="状态" align="center" prop="createTime" min-width="170">
                     <template scope="scope">
                        <span v-if="scope.row.status=='0'">未发布</span>
                        <span v-if="scope.row.status=='1'">已发布</span>
                    </template>
                </el-table-column>
                
                <el-table-column align="center" label="发布时间" prop="creatorName" min-width="170">
                    <template scope="scope">
                        <span>{{scope.row.uploadTime | isNull}}</span>
                    </template>
                </el-table-column>
 
                <el-table-column align="left" label="其他操作" width="200">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" v-if="scope.row.status=='0'" @click="updateDynamics(scope.row.pId)">发布</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.status=='0'" @click="editDynamics(scope.row.pId)">编辑</el-button>
                        <el-button type="text" class="btn-success" @click="deleteDynamics(scope.row.pId)">删除</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="+listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

    </div>
</template>
 
<script>
import { pageDynamicByCondition, uploadDynamic, removeDynamic } from 'api/dynamics';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import moment from 'moment';
 
export default{
    components: {TableLayout},
    data() {
        return {
            loadingBtn: false,
            formInline: {// form表单数据
                updateTime: '', // 发布日期
                status: '', // 状态
                client: '', // 客户端
                pickerOptions1: {}
            },
            statusList: [
                {
                    id: '',
                    name: '请选择'
                },
                {
                    id: '0',
                    name: '未发布'
                },
                {
                    id: '1',
                    name: '已发布'
                }
            ],
            clientList: [
                {
                    id: '',
                    name: '请选择'
                },
                {
                    id: '0',
                    name: '家庭端'
                },
                {
                    id: '1',
                    name: '教学端'
                },
                {
                    id: '2',
                    name: '家庭和教学端'
                }
            ],
            sortClickNum: '', // 点击量排序
            sortCommentNum: '', // 评论量排序
            dataApply: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                excuse: [
                    { required: true, message: '请输入驳回原因', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ]
            },
            loading: false,
            multipleSelection: []
        }
    },
   
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查询学校类型
        getSchoolType() {
            querySchoolType().then(response => {
                let schoolType = response.data.content;
                let select = {
                    typeName: '请选择',
                    schoolTypeId: ''
                }
                schoolType.unshift(select);
                this.formInline.dataType = schoolType;
            });
        },
        // 排序
        handlesortChange(column) {
            this.sortCommentNum = '';
            this.sortClickNum = '';
            if (column.prop == 'clickNum') {
                if (column.order == 'descending') {
                    this.sortClickNum = '1';
                } else if (column.order == 'ascending') {
                    this.sortClickNum = '0';
                } else {
                    this.sortClickNum = '';
                }
            }
            if (column.prop == 'commentNum') {
                if (column.order == 'descending') {
                    this.sortCommentNum = '1';
                } else if (column.order == 'ascending') {
                    this.sortCommentNum = '0';
                } else {
                    this.sortCommentNum = '';
                }
            }
            
            this.searchFetchData();
            
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let startTime = this.formInline.updateTime[0]==undefined ? '' :moment(this.formInline.updateTime[0]).format('YYYY-MM-DD');
            let endTime = this.formInline.updateTime[1]==undefined ? '' :moment(this.formInline.updateTime[1]).format('YYYY-MM-DD');
            console.log(startTime, endTime)
            pageDynamicByCondition(this.listQuery.page, this.config.pageSize, this.formInline.content, this.formInline.client, this.formInline.status, startTime, endTime, this.sortClickNum, this.sortCommentNum).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        // 表单查询
        onSubmit() {
            this.$refs['formInline'].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
        // 删除
        deleteDynamics(id) {
            this.$confirm('是否确定删除?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                removeDynamic(id).then(response => {              
                    this.$message.success('删除成功');
                    this.searchFetchData();
                });
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 发布
        updateDynamics(id) {
            this.$confirm('是否确定发布?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                uploadDynamic(id).then(response => {              
                    this.$message.success('发布成功');
                    this.searchFetchData();
                });
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 编辑
        editDynamics(id) {
            this.$router.push({path: `editDynamics/${id}`});
        },
        // 添加
        addDynamics() {
            this.$router.push({path: 'addDynamics'});
        },
        // 查看
        check(id) {
            this.$router.push({path: `checkDynamics/${id}`});
        }
 
    }
}
</script>
<style lang="scss" scoped>
 
.content {
    .btn-success{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
}
</style>